<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryGoodsList" :inline="true" label-width="68px">
        <el-form-item label="商品编号">
          <el-input v-model="queryGoodsList.productCode" placeholder="请输入商品编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="queryGoodsList.productName" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="批号">
          <el-input v-model="queryGoodsList.batchCode" placeholder="请输入批号" clearable></el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select filterable v-model="queryGoodsList.stoId" placeholder="请选择仓库">
            <el-option v-for="(item, index) in wareHouseList" :key="index" :value="item.stoId" :label="item.stoName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货位号">
          <el-input v-model="queryGoodsList.unitCode" placeholder="请输入货位号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getGoodsQuery">查询</el-button>
           <el-button icon="el-icon-download" type="success" @click="exportExcel">导出excel</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="goodsList" border height="605px" id="data-table">
        <el-table-column show-overflow-tooltip prop="productCode" label="商品编号" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="productName" label="商品名称"  align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="batchCode" align="center" label="批号"></el-table-column>
        <el-table-column show-overflow-tooltip prop="mnemonicCode" label="助记码" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="manufacturer" label="生产厂家" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="packSpec" label="包装规格" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="unitName" label="单位" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="num" label="数量" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="stoName" align="center" label="仓库"></el-table-column>
        <el-table-column show-overflow-tooltip prop="unitCode" align="center" label="货位"></el-table-column>
        <el-table-column show-overflow-tooltip prop="approvalNum" label="批准文号" align="center"></el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
        :page-sizes="[100, 150, 200, 500]" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import {
  getAllWarehouseList, //仓库下拉
} from "@/api/index/yxl.js"
  import {
    queryBasicInfo
  } from '@/api/storeM/yxl.js'
  export default {
    data() {
      return {
        queryGoodsList: {
          productCode: '',
          productName: '',
          formulation: ''
        },
        goodsList: [],
        pageNum: 1,
        pageSize: 100,
        total: 0,
        wareHouseList:[]
      }
    },
    created() {
      this.getGoods();
      this.getWareList();//获取下拉
    },
    methods: {
      //获取仓库下拉
      getWareList(){
        getAllWarehouseList().then(res => {
          this.wareHouseList = res.data;
        })
      },
      //导出
      exportExcel(){
        this.download('yxl/stock/exportStoStockInfo', {
          ...this.queryGoodsList,
        }, `库存查询.xlsx`)
      },
      //分页
      handleSizeChange(newsize) {
        this.pageNum = 1;
        this.pageSize = newsize;
        this.getGoods();
      },
      handleCurrentChange(newpage) {
        this.pageNum = newpage;
        this.getGoods();
      },
      //查询
      getGoodsQuery() {
        this.getGoods();
      },
      getGoods() {
        let params={
          ...this.queryGoodsList,
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
        queryBasicInfo(params).then(res => {
          this.goodsList = res.rows;
          this.total = res.total;
        })
      },
      clearAll() {
        this.queryGoodsList.productCode = ''; //清空编码
        this.queryGoodsList.productName = ''; //清空名称
        this.queryGoodsList.batchcode = ''; //批号
        this.queryGoodsList.stoId = ''; //仓库
        this.queryGoodsList.unitCode = '';//货位
        this.getGoodsQuery();
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 20px;
  }

  .el-card {
    margin-bottom: 20px;
  }

  .el-pagination {
    float: right;
    margin: 20px;
  }
</style>
